/**
 * Table组件，只支持最基础的横排表格，可传入 render 或者 renderTitle 函数进行自定义渲染
 */

import React, { Component } from 'react';
import { View, StyleSheet, Text, FlatList, TextInput, ViewStyle, ColorPropType, ScrollView } from 'react-native';


interface COLUMNS {
    title: string,
    dataIndex: string,
    width?: number, // flex
    render?: (any) => JSX.Element,
    renderTitle?: (any) => JSX.Element
}

interface Iprops {
    dataSource: Array<any>,
    columns: Array<COLUMNS>,
    styles?: ViewStyle,
    scroll?: boolean,
    title?: string | JSX.Element
}


class TableComponents extends Component<Iprops, any> {
    constructor(props) {
        super(props);
    }

    getTitles = (columns: Array<COLUMNS>): Array<string> => {
        let titles: Array<string> = [];
        for (let i = 0; i < columns.length; i++) {
            titles.push(columns[i].title);
        }
        return titles;
    }

    renderTitle = (columns) => {
        const length = columns.length || 1;
        const avgWidth = (100 / length).toFixed(2) + '%';
        return (
            <View style={styles.titleContent}>
                {
                    columns.map((column, index) => {
                        let { width = avgWidth, title, color = 'black', renderTitle } = column;
                        if (renderTitle) {
                            return renderTitle(title);
                        }
                        return (
                            <Text style={[{ width: width }, { color }]} key={`t-c-${index}`}> {title} </Text>
                        )
                    })
                }
            </View>
        )
    }

    renderContent = (columns: Array<COLUMNS>, dataSource: Array<any>, scroll?: boolean) => {
        const length = columns.length || 1;
        const avgWidth = (100 / length).toFixed(2) + '%';
        if (scroll) {
            return (
                <ScrollView>
                    {
                        dataSource.map((data, index) => {
                            return (
                                <View style={{ display: 'flex', flexDirection: 'row' }} key={`v-c-${index}`}>
                                    {
                                        columns.map((column, index) => {
                                            let { render, dataIndex, width = avgWidth } = column;
                                            if (render) {
                                                return render(data[dataIndex]);
                                            }
                                            let d = data[dataIndex] || '';
                                            return <Text style={[{ width: width }]} key={`d-c-${index}`}> {d} </Text>
                                        })
                                    }
                                </View>
                            )
                        })
                    }
                </ScrollView>
            )
        }
        return (
            <View style={styles.dataContent}>
                {
                    dataSource.map((data, index) => {
                        return (
                            <View style={{ display: 'flex', flexDirection: 'row' }} key={`v-c-${index}`}>
                                {
                                    columns.map((column, index) => {
                                        let { render, dataIndex, width = avgWidth } = column;
                                        if (render) {
                                            return render(data[dataIndex]);
                                        }
                                        let d = data[dataIndex] || '';
                                        return <Text style={[{ width: width }]} key={`d-c-${index}`}> {d} </Text>
                                    })
                                }
                            </View>
                        )
                    })
                }
            </View>
        )

    }

    renderTable = () => {
        const { dataSource, columns, scroll, title } = this.props;
        return (
            <View style={styles.container}>
                {
                    title ? <Text>{title}</Text> : null
                }
                {
                    this.renderTitle(columns)
                }
                {
                    this.renderContent(columns, dataSource, scroll)
                }
            </View>
        )
    }

    render() {
        return this.renderTable()
    }
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        flexDirection: 'column'
    },
    titleContent: {
        height: 30,
        display: 'flex',
        flexDirection: 'row'
    },
    titleText: {

    },
    dataContent: {

    }
})

export default TableComponents;